<template>
  <div class="posts-top">
    <h1 style="font-size: 30px">职位管理</h1>
    <el-button
      type="primary"
      class="btn"
      style="margin-right: 16px"
      plain
      @click="dialogFormVisible = true"
      >+添加职位
      <atrilDialog></atrilDialog>
    </el-button>
  </div>
  <div class="posts-centent">
    <div class="from">
      <el-form :model="formData" style="max-width: 95%">
        <el-form-item label="">
          <span>部门</span>
          <DropdownMenu v-model="formData.category" :options="categoryOptions" />
        </el-form-item>
        <el-form-item label="">
          <span>级别</span>
          <DropdownMenu v-model="formData.classification" :options="classificationOptions" />
        </el-form-item>
        <el-form-item label="">
          <span>状态</span>
          <DropdownMenu v-model="formData.column" :options="columnOptions" />
        </el-form-item>

        <el-form-item label="">
          <span>搜索职位</span>
          <el-input v-model="formData.productName" placeholder="请输入职位名称"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div class="centent-list">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="职位名称" width="180" />
      <el-table-column prop="name" label="部门" width="180" />
      <el-table-column prop="address" label="所需技能" />
      <el-table-column prop="jb" label="级别" />
      <el-table-column prop="zprs" label="招聘人数" />
      <!-- <el-table-column prop="zt" label="状态" /> -->
      <el-table-column label="状态" prop="zt">
        <!-- <span style="line-height: 20px; background-color: #274ae9;" >111</span> -->
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" :icon="Search" circle />
          <el-button type="success" :icon="Edit" circle />
          <el-button type="danger" :icon="Delete" circle />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination size="small" background layout="prev, pager, next" :total="50" class="mt-4" />
  </div>
  <!-- v-if控制模块显示隐藏 -->

  <el-dialog
    v-model="dialogFormVisible"
    title="添加职位"
    width="800"
    style="height: 600px; overflow-y: scroll"
  >
    <!-- <articleDialogs :from="form"> </articleDialogs> -->
    <el-form :model="form">
      <el-form-item label-position="top" :label-width="formLabelWidth" class="dform-state">
        <p>职位名称<span>*</span></p>
        <el-input v-model="form.name" placeholder="Please input" />
      </el-form-item>
      <el-form-item label-position="top" :label-width="formLabelWidth">
        <p>所属部门<span>*</span></p>
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label-position="top" :label-width="formLabelWidth">
        <p>职位级别<span>*</span></p>
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <p>职位描述<span>*</span></p>
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <p>任职要求<span>*</span></p>
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item label-position="top" :label-width="formLabelWidth">
        <p>所需技能</p>
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <div class="el-form-state">
        <div class="elfs-left">
          <p>状态</p>
          <el-select v-model="form.region" placeholder="Please select a zone">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </div>
        <div class="elfs-right">
          <p>招聘人数</p>
          <el-input v-model="form.name" autocomplete="off" />
        </div>
      </div>

      <el-form-item class="magin-T">
        <p>备注可选</p>
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
  <!--  -->
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, defineComponent } from 'vue'
import type { FormItemProps, FormProps } from 'element-plus'
import DropdownMenu from '@/components/gts/DropdownMenu.vue' // 引入下拉菜单组件
import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue'
// import articleDialogs from '@/components/gts/articleDialog.vue'
// import { ElMessageBox } from 'element-plus'
const categoryOptions = ref([
  { label: '工程部', value: '1' },
  { label: '设计部', value: '2' },
  { label: '市场部', value: '3' },
  { label: '产品部', value: '4' },
  { label: '人力资源', value: '5' },
])
const classificationOptions = ref([
  { label: '实习生', value: '1' },
  { label: '初级', value: '2' },
  { label: '中级', value: '3' },
  { label: '高级', value: '4' },
  { label: '团队负责人', value: '5' },
])
const columnOptions = ref([
  { label: '草稿', value: '1' },
  { label: '已关闭', value: '2' },
  { label: '招聘中', value: '3' },
])
// 引入在线状态检测

// 弹框
// const dialogTableVisible = ref(false)
const formLabelWidth = '140px'
const dialogFormVisible = ref(false)
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const gridData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-03',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
]
// 表格
const tableData = [
  {
    date: '前端开发工程师',
    name: '工程部门',
    address: ['HTML', 'CSS', 'JavaScript'],
    jb: '中级',
    zprs: '2',
    zt: '招聘中',
  },
  {
    date: 'Java后端开发工程师',
    name: '工程部门',
    address: 'Java',
    jb: '高级',
    zprs: '1',
    zt: '招聘中',
  },
  {
    date: 'UI/UX设计师',
    name: '设计部',
    address: 'Figma',
    jb: '中级',
    zprs: '2',
    zt: '招聘中',
  },
  {
    date: '产品经理',
    name: '工产品部',
    address: '需求分析',
    jb: '高级',
    zprs: '1',
    zt: '已关闭',
  },
  {
    date: '数据分析实习生',
    name: '市场部',
    address: 'Python',
    jb: '实习生',
    zprs: '3',
    zt: '草稿',
    cz: '查看',
  },
]
const formData = reactive({
  productName: '',
  category: '',
  classification: '',
  column: '',
  unit: '',
  attribute: '',
  status: 1,
  thumbnail: '',
})

const labelPosition = ref<FormProps['labelPosition']>('right')
const itemLabelPosition = ref<FormItemProps['labelPosition']>('')
const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})
</script>

<style>
/* 弹窗 */
.magin-T {
  margin-top: 10px;
}
.dform-state {
  display: flex;
  justify-content: space-around;
  align-items: left;
  flex-direction: column;
  /* margin-right: -20px; */
}
.el-form-state {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.elfs-left {
  width: 47%;
  display: flex;
  justify-content: space-around;
  align-items: left;
  flex-direction: column;
}
.elfs-right {
  width: 47%;
  display: flex;
  justify-content: space-around;
  align-items: left;
  flex-direction: column;
}
/* 状态 */
.status {
  padding: 4px 8px;
  width: 5px;
  height: 5px;
  border-radius: 30px;
  color: white;
}

.online {
  background-color: #4caf50;
}

.offline {
  background-color: #f44336;
}

.el-table__row {
  height: 80px;
}
.posts-top {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn {
  width: 120px;
  height: 40px;
  background-color: #274ae9;
  color: #fff;
}
.el-table-column {
  background-color: #ccc;
}
.centent-list {
  width: 100%;
  height: 390px;
  margin-top: 40px;
  background-color: #fff;
}

.tjzw {
  width: 100%;
  height: 410px;
  background-color: #fff;
  margin-top: 20px;
}

.el-form {
  margin-left: 20px;
}
.posts-centent {
  margin-top: 30px;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
}
</style>
